<template>
	<div>
		<div class="search-container">
			<el-form inline size="small">
				<el-form-item label="创建日期">
					<el-date-picker
						style="width: 100%"
						v-model="searchData.rangeDate"
						type="daterange"
						range-separator="~"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="searchData.settle" clearable>
						<el-option :value="true">已结算</el-option>
						<el-option :value="false">未结算</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSearch">查询</el-button>
					<el-button @click="onReset">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-table class="el-table-modify" :data="tableData" border>
			<el-table-column type="index" align="center" width="60" label="序号"></el-table-column>
			<el-table-column prop=" createdAt" align="center" label="创建日期">
				<template slot-scope="scope">
					{{scope.row.createdAt | dateFrm}}
				</template>
			</el-table-column>
			<el-table-column prop="orderNum" align="center" label="订单号"></el-table-column>
			<el-table-column prop="productName" align="center" label="产品名称"></el-table-column>
			<el-table-column prop="actualCost" align="center" label="消费金额"></el-table-column>
			<el-table-column prop="commission" align="center" label="经销商佣金"></el-table-column>
			<el-table-column prop="memberName" align="center" label="用户名称"></el-table-column>
			<el-table-column prop="sellerName" align="center" label="销售员"></el-table-column>
			<el-table-column prop="settle" align="center" label="状态">
				<template slot-scope="scope">
					{{scope.row.settle ? '已结算' : '未结算'}}
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			ref="pagination"
			class="mt-20"
			background
			:page-size.sync="pageOption.pageSize"
			@size-change="onSizeChange"
			@current-change="onPageChange"
			:total="pageOption.total"
			layout="slot,->,prev,pager,next,sizes,jumper"
		>
			<span
				class="pagination-title"
			>共 {{pageOption.total}} 条记录 第 {{pageOption.page}} / {{pageOption.pageTotal}} 页</span>
		</el-pagination>
	</div>
</template>

<script>
import { commissionRecordQuery } from "@/api/dealerMgt";
export default {
	name: "brokerageRecord",
	props: ['id'],
	data() {
		return {
			searchData: {
				rangeDate: [],
				settle: ""
			},
			tableData: [],
			pageOption: {
				page: 1,
				pageSize: 20,
				total: 0,
				pageTotal: 1
			},
			selectData: null
		};
	},
	methods: {
		onSearch() {
			this.pageOption.page = 1;
			this.requestData();
		},
		onReset() {
			this.pageOption.page = 1;
			this.searchData.rangeDate = [];
			this.searchData.settle = "";
			this.requestData();
		},
		async requestData() {
			const { page, pageSize: size } = this.pageOption;
			const postData = {};
			if (this.searchData.rangeDate[0]) {
				postData["start"] = this.searchData.rangeDate[0];
				postData["end"] = this.searchData.rangeDate[0];
			}

			if (this.searchData.settle) {
				postData.settle = this.searchData.settle;
			}

			const { data, total } = await commissionRecordQuery( this.id, 
				{
					page: page - 1,
					size,
					...postData
				}
			);
			this.tableData = data;
			this.pageOption.total = total || 0;
			this.pageOption.pageTotal = total ? Math.ceil(total / size) : 1;

			if (this.$refs.pagination) {
				let childrenRefs = this.$refs.pagination.$children;
				this.$nextTick(() => {
					childrenRefs.forEach(child => child.$forceUpdate());
				});
			}
		},
		onSizeChange(size) {
			this.pageOption.pageSize = size;
			this.requestData();
		},
		onPageChange(page) {
			this.pageOption.page = page;
			this.requestData();
		}
	},
	created() {
		this.requestData()
	}
};
</script>

<style scoped lang="scss">
</style>